<head>
    <!-- import CSS -->
<link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
<script src="./element-ui/lib/index.js"></script>
</head>
<div id="app">
    <el-button>添加</el-button>
    <i class="el-icon-delete"></i>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-table
              :data="teacherList"
              stripe
              border
              style="width: 100%">

        <el-table-column
              type="selection"
              width="55"></el-table-column>

        <el-table-column
              prop="name"
              label="姓名"></el-table-column>

        <el-table-column
              prop="gmtCreate"
              label="入驻日期"></el-table-column>

        <el-table-column
              label="级别">
            <template slot-scope="scope">
                {{ scope.row.level === 1?'高级讲师':'首席讲师' }}
            </template>
        </el-table-column>
    </el-table>
</div>

<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            teacherList: []
        },

        created () {
            this.getTeacherList()
            this.getTeacherList2()
        },

        methods: {
            // 方法1 start
            getTeacherList(){
                axios.get('http://localhost:8110/admin/edu/teacher/list').then(response => {
                    console.log(response)
                    this.teacherList = response.data.data.items
                }).catch(error=>{
                	//失败
                    console.log(error)
                })
            },
            // 方法1 end


            // 方法2 start
            // 备注：后端需要加上 @CrossOrigin 来解决跨域问题
            // 初始化axios设置，返回一个函数引用
            initRequest () { 
                return axios.create({
                    baseURL: 'http://localhost:8110', // api 的 base_url
                    timeout: 5000 // 请求超时时间
                })
            },
            
            //api访问模块
            teacherListApi (){
                let request = this.initRequest()
                return request({
                    url: '/admin/edu/teacher/list',
                    method: 'get'
                })
            },
            
                
            //获取讲师列表
            getTeacherList2() {
                console.log('发送ajax请求2......')
                this.teacherListApi().then(response => {
                    console.log(response)
                    var result = response.data //r对象
                    this.teacherList = result.data.items
                })
            }
            // 方法2 end
        }
    })
</script>